<template>
	<view class="p20">
		<view class="bg-fff p20 radius20">
			<view class="bg-f8f px20 py10 radius12 flex" v-if="data.name">
				<image :src="data.avatar" class="h56 w56 radius" mode="aspectFill"></image>
				<view class="color-232323 ml20">{{data.name||''}}</view>
			</view>
			<view class="color-232323 fw-700 mt28" v-if="data.hospital">{{data.hospital}}</view>
			<view class="color-zs mt8 fs26" v-if="data.service_name">{{data.service_name}}</view>
			<view class="fs28 color-B7B5B5 mt18 border-b pb24" v-if="data.expect_time">
				期望就诊时间：{{data.expect_time}}
			</view>
			<view class="flex row-between mt28" v-if="data.actual_price">
				<view class="color-666">订单金额</view>
				<view class="color-232323">
					<text class="fs28">￥</text>
					<text class="fs34">{{data.actual_price}}</text>
				</view>
			</view>
			<view class="flex row-between mt28" v-if="data.is_insured==1">
				<view class="color-666">保价服务费</view>
				<view class="color-232323">
					<text class="fs28">￥</text>
					<text class="fs34">{{data.insured_price}}</text>
				</view>
			</view>
			<view class="flex mt36" @click="couponShow=!couponShow" v-if="data.coupon&&data.coupon.length">
				<view class="fs28 color-666">优惠券</view>
				<view class="flex1 flex">
					<view class="yellow fs24 py8 px10 ml30 " v-if="coupon.name">{{coupon.name}}</view>
				</view>
				<view class="color-yellow">
					<block v-if="coupon.id">
						<text>-￥</text>
						<text>{{coupon.type == 'reduce'?coupon.reduce_price:coupon.discount+'折'||'0.00'}}</text>
					</block>
					<text v-else-if="data.coupon&&data.coupon.length">请选择</text>
					<text v-else>暂无可用优惠券</text>
					<image src="/static/img/release/right.png" class="h20 w20 ml10" mode=""></image>
				</view>
			</view>
			<view class="flex row-right mt30">
				<text class="fs26 color-232323">应付款</text>
				<text class="color-fs fs26">￥</text>
				<text class="color-fs fw-600 fs34">{{money}}</text>
			</view>
		</view>

		<view class="bg-fff p20 radius20 mt20 ">
			<view class="pt26 pb26 border-b flex row-between" @tap='type=item.type' v-for="(item,index) in payList"
				:key="index">
				<view class="flex">
					<u-icon :name="item.icon" :color="item.color" size="50"></u-icon>
					<view class="fs24 fw-500 ml20">{{item.name}}</view>
				</view>
				<u-icon name="checkmark-circle-fill" :color="$zs" v-if="type==item.type" size="40"></u-icon>
				<u-icon name="checkmark-circle" v-else color="#ccc" size="40"></u-icon>
			</view>
		</view>

		<view class="mx40 bg-zs color-fff h84 radius12 flex row-center mt60" @click="submit">
			确认支付（￥{{money}}）
		</view>
		<payment v-model="payData" depositShow @success="success" />
		<u-popup v-model="couponShow" mode="bottom" borderRadius="20" closeable>
			<view class="p20">
				<view class="tc pb20 fs362">优惠券列表</view>
				<scroll-view scroll-y style="height: 600rpx;">
					<view class="pb20" v-for="(item,index) in data.coupon" :key="index">
						<coupon :data="item" @success="getList" :receive="$params.show==0" :sel="true" :sel_id="coupon.id"
							@change="change" />
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'wxnative',
				payList: [{
					"name": '微信',
					icon: 'weixin-circle-fill',
					color: '#6bcc03',
					type: 'wxnative'
				}, {
					"name": '支付宝',
					icon: 'zhifubao-circle-fill',
					color: '#33c2fd',
					type: 'aliscan'
				}, ],


				payData: "",

				data: '',
				couponShow: false,
				coupon: {},

				qrCode: ""
			};
		},
		computed: {
			money() {
				let money = this.data.pay_price
				// let coupon = this.coupon
				// if (coupon.id) {
				// 	if (coupon.type == 'reduce') {} else {
				// 		coupon.reduce_price = money * coupon.discount
				// 	}
				// 	money = money * 1 - coupon.reduce_price * 1
				// }
				return money || '0.00'
			}
		},
		onLoad() {
			this.createOrder()
		},
		methods: {
			submit() {
				let params = {
					...this.$params,
					target: this.$params.order_sn, //	number	必填	-	-	订单编号
					target_type: 'order', //	字符串	必填	-	-	订单类型:order=订单,recharge=充值
					member_coupon_id: this.coupon.id || '', //	整型	必填	-	-	用户优惠券id
					money: this.money, //	number	必填	-	-	支付金额
					pay_type:this.type,
				}
				this.$request('/payment/pay/pay', params).then(res => {
					this.qrCode = res.data
				})
			},
			change(e) {
				console.log(e);
				if (this.coupon.id == e.id) {
					this.coupon = {}
				} else {
					this.coupon = e
				}
				this.createOrder()
				this.couponShow = false
			},
			createOrder() {
				let params = {
					...this.$params,
					member_coupon_id: this.coupon.id || '',
				}
				this.$request('/payment/pay/getPayInfo', params).then(res => {
					this.data = res.data || ''
				})
			},

			success() {
				this.$msg('支付成功')
				setTimeout(() => {
					this.$jump('/pages/order/order')
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">

</style>